<template>
    <div id="order">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="反馈" name="0"></el-tab-pane>
            <el-tab-pane label="留言" name="1"></el-tab-pane>
            <el-tab-pane label="收藏及喜欢" name="2"></el-tab-pane>
            <el-tab-pane label="关注提醒" name="3"></el-tab-pane>
            <el-tab-pane label="官方通知" name="4"></el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: '0',
      total: 1,
      current_page: 1,
      tableData: [],
      orderState: ['反馈（待回复）', '反馈（已回复）', '留言（待回复）', '留言（已回复）'],
      preState: 0,
      preType: 0,
      listing: '',
      listed: '',
      current_state: 0,
      pageShow: true,
      emptyShow: false
    }
  },
  methods: {
    handleClick (tab) {
      if (tab.index === '3') {
        this.$router.push({ name: 'NewsFollow' })
      } else if (tab.index === '4') {
        this.$router.push({ name: 'NewsCustom' })
      } else if (tab.index === '2') {
        this.$router.push({ name: 'NewsLike' })
      } else if (tab.index === '0') {
        this.$router.push({ name: 'NewsFeedback', params: { userMsg: this.userMsg } })
      } else if (tab.index === '1') {
        this.$router.push({ name: 'NewsWord', params: { userMsg: this.userMsg } })
      }
    }
  },
  mounted () {
    this.activeName = this.$route.meta.id
  },
  updated () {
    this.activeName = this.$route.meta.id
  }
}
</script>

<style lang="less">
#order{
    width: 1000px;
    margin: 80px auto;
    .adress{
        display: block;
        text-align: right;
        margin: 20px 0;
        height:50px;line-height: 50px;
        background-color: rgba(0,0,0, 0.2);
        color: #fff;
        a{
            color: #fff;
            &:hover{
                color: rgb(35, 35, 226)
            }

        }
    }
}
.pageControl{
    text-align: center;
    margin: 20px 0;
    li{
        &:hover{
            color: #FF4329 !important
        }
    }
}
.goodsImg{
    width: 80px;
    height: 80px;
}
.feedbackWin{
  width: 80%;
  margin: 0  auto;
  p{
    height: 40px;
    line-height: 40px;
  }
}
.news-item{
    width: 100%;
    overflow: hidden;
    margin: 10px 0;
    padding: 10px 0 20px 0;
    border-bottom: 1px solid #E5E3DF;
    img{
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 20px 20px 0 0;
    }
    .news-wrap{
        float: left;
        overflow: hidden;
        width: 600px;
        .news-message{
            font-size: 13px;
            text-align:left;
            margin-top: 14px;
        }
        .news-time{
            margin-top: 14px;
            font-size: 12px;
            color: #999;
            text-align:left;
        }
    }
    .news-control{
        float: right;
        .news-browse{
            display:block;
            padding: 5px 20px;
            border:1px solid #938b8b;
             text-align: center;
            border-radius: 4px;
            margin-top: 10px;
            &:hover {
              cursor: pointer;
            }
        }
    }
}
.page-wrap{
    text-align: center;
    margin: 20px 0
}
</style>
